<template>
  <div class="body">
    <div class="top">
      <h1>￥{{ $route.query.id | money }}</h1>
      <h2>当前余额</h2>
      <h3 @click="$router.push('/index')">
        <label>点击这里继续完成任务拿奖励吧~</label>
      </h3>
      <ol>
        <div style="margin-left: 1.7rem;" @click="$router.push('/outmoney')">
          <label>提现</label>
        </div>
        <div @click="$router.push('/cashflow')"><label>资金流水</label></div>
      </ol>
    </div>

    <div class="product">
      <h1>推荐任务</h1>
    </div>

    <div class="misbox">
      <dl
        @click="$router.push({ path: '/detial', query: { id: item.id } })"
        v-for="(item, index) in mislist"
        :key="index"
      >
        <dd>
          <img :src="item.thumbnail" alt="" @error="errorImage($event)" />
        </dd>
        <dt>
          <h1 class="ellipsis">{{ item.name }}.</h1>
          <h2>{{ item.complete_remark }}</h2>
          <h3>
            <i>{{
              item.complete_remark ? item.complete_remark : '抓紧时间哦'
            }}</i>
          </h3>
          <span>￥{{ item.task_price | money }}</span>
        </dt>
      </dl>
    </div>

    <div class="btmBox" style="height: 1rem;"></div>
  </div>
</template>

<script>
import { axiosPost } from '../../axios';

export default {
  name: '',
  data() {
    return {
      mislist: [],
    };
  },
  mounted() {
    this.getmission();
  },
  methods: {
    getmission() {
      axiosPost(
        'index/task_list',
        {
          select_type: '3',
        },
        (res) => {
          if (res.code !== 1) {
            // return Toast({
            //     message: res.msg,
            //     duration: 1000
            // });
          }
          this.mislist = res.data;
        }
      );
    },
  },
};
</script>

<style scoped lang="less">
@import '../../style/default';
@import '../../style/indexlist';
.top {
  height: 5.36rem;
  background: @color4;
  overflow: hidden;
  h1 {
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(42, 43, 63, 1);
    line-height: 0.8rem;
    text-align: center;
    margin-top: 1.28rem;
  }
  h2 {
    font-size: @font28;
    font-weight: 400;
    color: rgba(104, 104, 119, 1);
    line-height: 0.8rem;
    text-align: center;
  }
  h3 {
    width: 5.605rem;
    height: 0.624rem;
    border: 1px dashed @color1;
    border-radius: 0.312rem;
    margin: 0 auto;
    -webkit-transform: scale(0.8) translate(0%, 0%);
    transform: scale(0.8) translate(0%, 0%);
    font-size: 0.336rem;
    font-weight: 400;
    color: @color1;
    line-height: normal;
    text-align: center;
    display: table;
    label {
      display: table-cell;
      vertical-align: middle;
    }
  }
  ol {
    text-align: center;
    div {
      display: table;
      width: 2.52rem;
      height: 0.92rem;
      background: @color1;
      border-radius: 0.48rem;
      margin: 0.4rem 0 0;
      -webkit-transform: scale(0.8) translate(-20%, -20%);
      transform: scale(0.8) translate(-20%, -20%);
      text-align: center;
      font-size: 0.384rem;
      font-weight: 400;
      color: @color4;
      line-height: normal;
      border: 1px solid @color1;
      float: left;
      label {
        display: table-cell;
        vertical-align: middle;
      }
    }
    div:nth-child(2) {
      background: @color4;
      color: @color1;
      margin-left: -0.3rem;
    }
  }
}

.product {
  background: @color4;
  margin-top: 0.24rem;
  h1 {
    font-size: @font32;
    font-weight: 400;
    color: @color3;
    padding-left: 0.39rem;
    line-height: 1rem;
  }
  ul {
    padding: 0 0.2rem;
    li {
    }
  }
}

.misbox {
  margin-top: 0;
  background: @color4;
  dl {
    margin-top: 0;
    margin-bottom: 0.3rem;
  }
}
</style>
